<template>
    <div id='reply' ref="reply">
        <div class="reply_br"></div>
        <div class="reply_title">
            <van-collapse class="reply_collapse" v-model="activeNames">
                <van-collapse-item :title="data.title" name="1">
                    <div class="colla_title">{{ data.content }}</div>
                    <div class="colla_image">
                        <img class="img" v-for="(item, index) in this.data.imgUrl" :key="index" :src="item" alt="图片" />
                    </div>
                </van-collapse-item>
            </van-collapse>
        </div>
        <div class="reply_box" ref="reply_box">
            <div class="reply_list" ref="reply_list">
                <div class="flex_div"></div>
                <div class="flex_div" v-for="(item, index) in list" :key="index">
                    <div class="reply_cell" v-if="item.userType === '0'"
                        style="margin-left:10%;text-align-last:right;text-align:-webkit-right;text-align:right;">
                        <span class="reply_cell_span">{{ item.content }}</span>
                    </div>
                    <div class="reply_cell_left" v-if="item.userType === '1'"
                        style="margin-right:10%;text-align-last:left;text-align:-webkit-left;text-align:left;">
                        <span class="reply_cell_span">{{ item.content }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="reply_txt">
            <input type="txt" v-model="message" class="txtmessage" />
            <van-button class="messagebut" @click="send" size="small" type="primary">发送</van-button>
        </div>
    </div>
</template>
<script>
import { getreply, getConsultList, addquestion } from "@/api/school"
export default {
    name: 'reply',
    data() {
        return {
            url: {
                background_img_ipg: require('@/assets/images/school/background_img_ipg.jpg'),
            },
            data: {},
            list: [],
            message: "",
            activeNames: ["0"],
            loading: false,
            finished: false,
            refreshing: false,
            route: {},
        };
    },
    created() {

    },
    mounted() {
        this.route = this.$route.query
        this.$refs.reply.style.backgroundImage = "url(" + this.url.background_img_ipg + ")";
        this.onLoad();
        setInterval(() => {
            this.getgetreply(false);
        }, 20000)
    },
    methods: {
        onLoad() {
            setTimeout(() => {
                if (this.refreshing) {
                    this.refreshing = false
                }
                this.loading = false
                getConsultList({ id:  this.route.id, }).then(res => {
                    if (res.data.data.results[0].imgUrl === "") {
                        res.data.data.results[0].imgUrl = []
                    } else {
                        res.data.data.results[0].imgUrl = res.data.data.results[0].imgUrl.split(",");
                    }
                    this.getgetreply(true);
                    this.data = res.data.data.results[0];
                })
                this.finished = true;
            }, 0);
        },
        getgetreply(flag) {
            getreply({ id: this.route.id, pageSize: 100 }).then(res => {
                this.list = res.data.data;
            }).then(() => {
                if (flag) {
                    this.$el.querySelector('.reply_box').scrollTop = this.$el.querySelector('.reply_box').scrollHeight
                };
            })
        },
        send() {
            if (this.message !== "") {
                addquestion({
                    id: this.route.id,
                    content: this.message,
                    userType: "0",
                    phone: this.route.mobile,
                    createBy: this.route.name,
                }).then(res => {
                    this.message = "";
                    this.getgetreply(true);
                })
            } else {
                this.$toast('消息为空！')
            }
        }
    },
};
</script>

<style scoped lang="less">
#reply {
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    position: relative;

    .reply_br {
        position: absolute;
        width: 100%;
        height: 21%;
        left: 0;
        top: 0;
    }

    .reply_title {
        position: absolute;
        width: 100%;
        height: 6.6%;
        left: 0;
        top: 21%;
        z-index: 2;

        .reply_collapse {
            width: 100%;
            height: 100%;

            .colla_image {
                .img {
                    width: 60px;
                    height: 60px;
                    padding: 5px;
                }
            }
        }
    }

    .reply_box {
        position: absolute;
        left: 0;
        width: 100%;
        top: 27.6%;
        z-index: 0;
        height: calc(72.4% - 50px);
        overflow-y: scroll;

        .reply_list {
            width: 90%;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column-reverse;
            min-height: 100%;

            .flex_div {
                clear: both;
                margin: 5% 0;
            }

            .reply_cell_span {
                background-color: #fff;
                padding: 2%;
                display: inline-block;
                border-radius: 10px;
                word-break: break-all
            }
        }
    }

    .reply_txt {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        height: 50px;
        display: flex;
        align-items: center;
        box-shadow: 0 -2px 1px #dddddd;

        .txtmessage {
            width: 70%;
            height: 30px;
            margin-left: 5%;
            outline: none;
            border: none;
            background-color: #fff;
            resize: none;
            font-size: .8rem;
        }

        .messagebut {
            width: 20%;
            height: 30px;
            margin: 0 5%;
        }
    }
}
</style>
